import * as React from 'react';
import './HintBlock.css';

export interface HintBlockProps
{
    title: string; //标题
}

export interface HintBlockState 
{
    pos: React.CSSProperties; //提示块位置
    isShow: React.CSSProperties;
    inputValue: number
}

export default class HintBlock extends React.Component<HintBlockProps, HintBlockState>
{
    public state: HintBlockState;
    private m_y: number;
    constructor(props: HintBlockProps)
    {
        super(props);

        this.state =
            {
                isShow: {},
                pos: { display: 'none', left: 0, top: 0 },
                inputValue: 0
            }
    }
    public handleshowBlock()
    {
        let moveBlock = (e: MouseEvent) =>
        {
            let m_inputData = (this.refs.inputData as HTMLInputElement)
            this.setState({ pos: { display: 'block', left: e.clientX + 20 + 'px', top: e.clientY + 20 + 'px' } });
            m_inputData.value = e.clientX + '';
            this.m_y = window.innerHeight - e.clientY - 24;
            m_inputData.focus();
            m_inputData.setSelectionRange(0, (e.clientX + '').length);
        }
        document.addEventListener('click', (e: MouseEvent) =>
        {

            if (this.state.pos.display === 'none')
            {
                document.addEventListener('mousemove', moveBlock)
            }
            else
            {
                this.setState({ pos: { display: 'none' } });
                document.removeEventListener('mousemove', moveBlock);
            }



        })
    }
    componentDidMount()
    {
        this.handleshowBlock();

    }
    componentWillUnmount()
    {
        //TODO: 此处应该写入销毁的注入事件. 
    }
    render() 
    {
        return (
            <div id="hint-block" style={this.state.pos}>
                <label>{this.props.title}</label>
                <input type="text" autoFocus ref='inputData' />
                <label>{this.m_y}</label>
            </div>
        );
    }
}
